<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>Media Queries Index</title>
<meta name="Description" content="CSS媒体查询: CSS Media Queries Module" />
<meta name="Keywords" content="CSS媒体查询, CSS Media Queries" />
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<meta name="robots" content="all" />
<!--[if lte IE 8]>
<script src="../../js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="../../skin/article.css" />
</head>
<body>
<nav id="guide" class="g-mod">
	<div class="from">
		<a href="http://css.doyoe.com/" target="_blank">CSS3参考手册</a>
		<span>&#187;</span>
		<a href="../index.htm">属性列表</a>
		<span>&#187;</span>
		<span id="category" rel="properties/media-queries" name="index">媒体查询属性</span>
	</div>
	<div class="to">
		<span class="label">相关内容：</span>
		<div class="g-combobox g-transition">
			<a href="?" class="g-transition target">
				<strong>其它媒体查询属性</strong>
				<span>选择其它项<!--[if lte IE 7]><ins>IE7 and earlier, Get to die</ins><![endif]--></span>
			</a>
			<div class="g-transition list">
				<ul>
					<!-- 插入分类快速导航 -->
				</ul>
			</div>
		</div>
	</div>
</nav>
<header id="hd">
	<section id="title" class="g-mod">
		<h1 class="tit">CSS Media Queries Module</h1>
		<ul class="info">
			<li>CSS媒体查询</li>
		</ul>
		<!-- 插入浏览器信息 -->
	</section>
</header>
<section id="bd">
	<section id="syntax" class="g-mod g-attr">
		<h2 class="tit">语法：</h2>
		<div class="cont">
			<p><strong>&lt;media_query_list&gt;</strong>：[<a href="#dfn-syntax">&lt;media_query&gt;</a>[, <a href="#dfn-syntax">&lt;media_query&gt;</a>]*]?</p>
			<p id="dfn-syntax"><strong>&lt;media_query&gt;</strong>：[only | not]? <a href="../../appendix/media-types.htm">&lt;media_type&gt;</a> [and <a href="#dfn-syntax2">&lt;expression&gt;</a>]* | <a href="#dfn-syntax2">&lt;expression&gt;</a> [and <a href="#dfn-syntax2">&lt;expression&gt;</a>]*</p>
			<p id="dfn-syntax2"><strong>&lt;expression&gt;</strong>：(<a href="#media-features-listing">&lt;media_feature&gt;</a>[:&lt;value&gt;]?)</p>
		</div>
	</section>
	<section id="intro" class="g-mod g-attr">
		<h2 class="tit">说明：</h2>
		<div class="cont">
			<strong>通过不同的媒体类型和条件定义样式表规则。</strong>
			<ul>
				<li>媒体查询让 CSS 可以更精确作用于不同的媒体类型和同一媒体的不同条件。</li>
				<li>媒体查询的大部分媒体特性都接受<code class="g-code">min</code>和<code class="g-code">max</code>用于表达<code class="g-code">大于或等于</code>和<code class="g-code">小与或等于</code>。如：<a href="width.htm" class="g-property">width</a>会有<code class="g-property">min-width</code>和<code class="g-property">max-width</code></li>
				<li>
					<p>媒体查询可以被用在 CSS 中的 @media 和 @import 规则上，也可以被用在 HTML 和 XML 中。</p>
					<div class="gquote">
						<p class="gquote-tit"><strong>示例代码：</strong></p>
						<blockquote class="gquote-cont"><code><xmp>@media screen and (width:800px){ … }
@import url(example.css) screen and (width: 800px);
<link media="screen and (width: 800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (width: 800px)" rel="stylesheet" href="example.css" ?></xmp></code></blockquote>
					</div>
				</li>
			</ul>
		</div>
	</section>
	<section id="media-features-listing" class="g-mod g-attr">
		<h2 class="tit">媒体特性 Media Features</h2>
		<div class="cont">
			<table class="g-data">
				<thead>
					<tr>
						<th>媒体特性</th>
						<th>取值</th>
						<th>接受min/max</th>
						<th>描述</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><a href="width.htm" class="g-color-css3-new">width</a></td>
						<td><a href="../../values/length/index.htm">&lt;length&gt;</a></td>
						<td>yes</td>
						<td>定义输出设备中的页面可见区域宽度</td>
					</tr>
					<tr>
						<td><a href="height.htm" class="g-color-css3-new">height</a></td>
						<td><a href="../../values/length/index.htm">&lt;length&gt;</a></td>
						<td>yes</td>
						<td>定义输出设备中的页面可见区域高度</td>
					</tr>
					<tr>
						<td><a href="device-width.htm" class="g-color-css3-new">device-width</a></td>
						<td><a href="../../values/length/index.htm">&lt;length&gt;</a></td>
						<td>yes</td>
						<td>定义输出设备的屏幕可见宽度</td>
					</tr>
					<tr>
						<td><a href="device-height.htm" class="g-color-css3-new">device-height</a></td>
						<td><a href="../../values/length/index.htm">&lt;length&gt;</a></td>
						<td>yes</td>
						<td>定义输出设备的屏幕可见高度</td>
					</tr>
					<tr>
						<td><a href="orientation.htm" class="g-color-css3-new">orientation</a></td>
						<td>portrait | landscape</td>
						<td>no</td>
						<td>定义输出设备中的页面可见区域高度是否大于或等于宽度。可用于检测设备是横屏还是竖屏</td>
					</tr>
					<tr>
						<td><a href="aspect-ratio.htm" class="g-color-css3-new">aspect-ratio</a></td>
						<td>&lt;ratio&gt;</td>
						<td>yes</td>
						<td>定义页面可见区域宽度与高度的比率</td>
					</tr>
					<tr>
						<td><a href="device-aspect-ratio.htm" class="g-color-css3-new">device-aspect-ratio</a></td>
						<td>&lt;ratio&gt;</td>
						<td>yes</td>
						<td>定义输出设备的屏幕可见宽度与高度的比率。常见比率：4/3, 16/9, 16/10</td>
					</tr>
					<tr>
						<td><a href="color.htm" class="g-color-css3-new">color</a></td>
						<td><a href="../../values/numeric/integer.htm">&lt;integer&gt;</a></td>
						<td>yes</td>
						<td>定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0</td>
					</tr>
					<tr>
						<td><a href="color-index.htm" class="g-color-css3-new">color-index</a></td>
						<td><a href="../../values/numeric/integer.htm">&lt;integer&gt;</a></td>
						<td>yes</td>
						<td>定义输出设备的颜色查找表中的条目数。如果没有使用颜色查询表，则值等于0</td>
					</tr>
					<tr>
						<td><a href="monochrome.htm" class="g-color-css3-new">monochrome</a></td>
						<td><a href="../../values/numeric/integer.htm">&lt;integer&gt;</a></td>
						<td>yes</td>
						<td>定每个单色帧缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0</td>
					</tr>
					<tr>
						<td><a href="resolution.htm" class="g-color-css3-new">resolution</a></td>
						<td><a href="../../values/resolution/resolution.htm">&lt;resolution&gt;</a></td>
						<td>yes</td>
						<td>定义设备屏幕的像素密度（即屏幕质量）。如：96dpi, 300dpi, 118dpcm</td>
					</tr>
					<tr>
						<td><a href="device-pixel-ratio.htm">device-pixel-ratio</a></td>
						<td><a href="../../values/numeric/number.htm">&lt;number&gt;</a></td>
						<td>yes</td>
						<td>非标准特性。部分浏览器不支持<a href="resolution.htm" class="g-property">resolution</a>特性可使用本特性替代</td>
					</tr>
					<tr>
						<td><a href="scan.htm" class="g-color-css3-new">scan</a></td>
						<td>progressive | interlace</td>
						<td>no</td>
						<td>定义电视类设备的扫描工序</td>
					</tr>
					<tr>
						<td><a href="grid.htm" class="g-color-css3-new">grid</a></td>
						<td><a href="../../values/numeric/integer.htm">&lt;integer&gt;</a></td>
						<td>no</td>
						<td>用来查询输出设备是否使用栅格或点阵。1代表是，0代表否</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="related">
			<p class="g-color-light"><strong class="g-color-css3-change">紫色</strong> 链接表示该属性在CSS3有修改或者增加了新的属性值；<strong class="g-color-css3-new">橙色</strong> 链接表示该属性是CSS3新增属性</p>
		</div>
	</section>
	<section id="compatible" class="g-mod g-attr">
		<h2 class="tit">兼容性：</h2>
		<div class="cont">
			<ul class="support-type">
				<li><span class="support">浅绿</span> = 支持</li>
				<li><span class="unsupport">红色</span> = 不支持</li>
				<li><span class="partsupport">粉色</span> = 部分支持</li>
			</ul>
			<table class="g-data">
				<thead>
					<tr>
						<th>Values</th>
						<th>IE</th>
						<th>Firefox</th>
						<th>Chrome</th>
						<th>Safari</th>
						<th>Opera</th>
						<th>iOS Safari</th>
						<th>Android Browser</th>
						<th>Android Chrome</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td rowspan="3"><strong>Basic Support</strong></td>
						<td class="unsupport">8.0</td>
						<td class="support" rowspan="3">40.0+</td>
						<td class="support" rowspan="3">40.0+</td>
						<td class="support" rowspan="3">8.0+</td>
						<td class="support" rowspan="3">40.0+</td>
						<td class="support" rowspan="3">8.0+</td>
						<td class="support" rowspan="3">4.4+</td>
						<td class="support" rowspan="3">28.0+</td>
					</tr>
					<tr>
						<td class="partsupport">9.0-11.0<sup><a href="#support1">#1</a></sup></td>
					</tr>
					<tr>
						<td class="support">12.0-16.0 ?</td>
					</tr>
				</tbody>
			</table>
			<ol class="support-info">
				<li id="support1">不支持嵌套媒体查询。</li>
			</ol>
		</div>
	</section>
</section>
<footer id="ft">
	<aside id="rights" class="g-mod">
		<!-- 插入浏览器及版权信息 -->
	</aside>
</footer>
<script src="../../js/jquery.js"></script>
<script src="../../js/inner.js"></script>
</body>
</html>